<template>
  <!-- <div>自营订单结算</div> -->
  <div class="shop">
    <div class="top">
      <el-button size='small'
        type='primary' :disabled='selectionList.length === 0'
        @click="AllSettleOrders">批量结算</el-button>

      <el-button class='search'
        size='small'
        type='primary'
        @click="searchSettleOrderData">搜索</el-button>
      <el-input class="search input"
        size='small'
        v-model="form.order_no"
        placeholder="输入订单编号结算"
        clearable></el-input>
      <!-- <el-input class="search input"
        size='small'
        v-model="form.title"
        placeholder="输入商品名称查询"
        clearable></el-input> -->

      <el-select style="width:120px;"
        size='small'
        v-model="form.status"
        filterable
        class="search"
        placeholder="结算状态">
        <el-option label="全部"
          :value="0">全部</el-option>
        <el-option label="已结算"
          :value="3"></el-option>
        <el-option label="未结算"
          :value="1"></el-option>
      </el-select>
    </div>
    <el-table :data="tableData"
      style="width:100%"
      max-height="600"
      :cell-style="tc"
      border
       @selection-change="handleSelectionChange"
      :header-cell-style="tccolor">
      <el-table-column type="selection"
        label='选择'
        width="55">
      </el-table-column>
      <el-table-column label='订单编号'
        prop='order_no'
        width='120'></el-table-column>
      <el-table-column label='商品ID'
        prop='product_id' width='120'></el-table-column>
      <el-table-column label='创建时间'
        prop='created_at' width='140'></el-table-column>
      <el-table-column label='用户账号'
        prop='username' width='120'></el-table-column>
      <el-table-column label='商品数量'
        prop='quantity'></el-table-column>
      <el-table-column label='供货价'>
        <template slot-scope="scope">
          ¥{{scope.row.supply_price}}
        </template>
      </el-table-column>
      <el-table-column label='订单原价'>
        <template slot-scope="scope">
          ¥{{scope.row.price}}
        </template>
      </el-table-column>
      <el-table-column label='红包抵扣'>
        <template slot-scope="scope">
          ¥{{scope.row.red_packet_discount_price}}
        </template>
      </el-table-column>
      <el-table-column label='商品付款金额'>
        <template slot-scope="scope">
          ¥{{scope.row.product_total_price}}
        </template>
      </el-table-column>
      <el-table-column label='付款运费'>
        <template slot-scope="scope">
          ¥{{scope.row.freight_amount}}
        </template>
      </el-table-column>
      <el-table-column label='付款总金额'>
        <template slot-scope="scope">
          ¥{{scope.row.actual_amount}}
        </template>
      </el-table-column>
      <el-table-column label='分润比例（总）'>
        <template slot-scope="scope">
          {{scope.row.share_profit_rate}}
        </template>
      </el-table-column>
      <el-table-column label='收益（总）'>
        <template slot-scope="scope">
          ¥{{scope.row.share_profit}}
        </template>
      </el-table-column>
      <el-table-column label='订单状态'>
        <template slot-scope="scope">
          <p v-if='scope.row.order_status ==5'>待收货</p>
          <p v-if='scope.row.order_status ==10'>已完成</p>
          <p v-if='scope.row.order_status ==20'>已关闭</p>
        </template>
      </el-table-column>
      <el-table-column label='结算状态'>
        <template slot-scope="scope">
          <p v-if='scope.row.status == 0'>未结算</p>
          <p v-else>已结算</p>
        </template>
      </el-table-column>
      <el-table-column label='操作'
        fixed='right'
        width='160'>
        <template slot-scope="scope">
          <el-button size='mini'
            @click="openOrderDetailData(scope.row.order_no)">详情</el-button>
          <el-button size='mini'
            type='primary' v-show='scope.row.status ==0'
            @click="settleOrderData(scope.row.id)"
            :disabled=' scope.row.order_status !=10 || scope.row.status !=0'>结算</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24">
      <div class="pagination">
        <el-pagination background
          @current-change="pageChange"
          :current-page="form.page"
          :page-size="15"
          layout="total, prev, pager, next, jumper"
          :total="total"></el-pagination>
      </div>
    </el-col>

  </div>
</template>


<script>
import {settleSelfsupportList,settleSelfsupportSelect} from '@/api/finance';
export default {
  data () {
    return {
      form: {
        status: '',
        order_no: '',
        page: 1,
      },
      tableData: [],
      total: 0,

      selectionList: [],
    }
  },
  mounted () {
    this.getsettleSelfsupportListData()
  },
  methods: {
    //订单结算
    AllSettleOrders () {
      var arr = []
       this.selectionList.map(obj => {
          arr.push(obj.id)
       })
        var form = {ids:arr.join()}
        this.getsettleSelfsupportSelectData(form)
    },
    //搜索
    searchSettleOrderData () {
      this.getsettleSelfsupportListData()
    },
    //结算订单状态
    settleOrderData (id) {
      this.$confirm('确认结算该订单？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
     
        var form = {ids:id}
       this.getsettleSelfsupportSelectData(form)
      }).catch(() => {
        console.log('cancel')
      });
    },
    //查看订单详情
    openOrderDetailData (id) {
      console.log(id)
      this.$router.push({ path: '../autarky/preorderdetail', query: { order_no: id } })
    },
    pageChange (page) {
      this.form.page = page
      //获取更多数据
      this.getsettleSelfsupportListData()
    },
    //获取更多列表数据
    async getsettleSelfsupportListData(){
      if(this.form.status == 0){
        this.form.status =''
      }
      let res = await settleSelfsupportList(this.form)
      if(res.code === 10000){
        this.tableData = res.data.data
        this.total =  res.data.total
      }else{
        this.$message.error(res.message)
      }
    },
    handleSelectionChange(arr){
      this.selectionList = arr
    },
    async getsettleSelfsupportSelectData(form){
     let res = await settleSelfsupportSelect(form)
     if(res.code === 10000){
       this.$message.success(res.message)
       this.getsettleSelfsupportListData()
     }else{
       this.$message.error(res.error)
     }
    },
    tc () {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor () {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
  }
}
</script>
<style lang="scss" scoped>
.shop {
  padding: 20px;
  .top {
    margin-bottom: 20px;
    .search {
      float: right;
      margin-left: 12px;
    }
    .input {
      width: 150px;
    }
  }

  .pagination {
    float: right;
    margin-top: 16px;
  }
}
</style>